Rich text express-mongodb-rest-api-tutorial

Background Wrapper express-mongodb-rest-api-tutorial

The “server” directory hosts the Express.js server application and its dependencies. The main files here are:

The “app” directory is where the front-end React application code resides. The main files here are:

First, you will need to deploy an Atlas cluster. You can follow the 

 guide to learn how to create a free Atlas account, create your first cluster, and get your 

Let's go to the “server” directory of the project and install the needed packages:

You can start the server right away. It will automatically reload every time you save one of the files in the project.

Now, we are ready to connect our Express server to the MongoDB Atlas Cluster.

file to assign the ATLAS_URI variable the value of your connection string. Replace the credentials with your database username and password.

 file to add these values to the environment variables usable by the code.

file to load these environment variables.

The entry point script can then import this file, which will be executed immediately. In 

The Atlas connection string will now be available to our other modules.

 and replace the content with the following code. This code will create a global database object that the other server components can reuse.

This code uses the connection string provided in the 

 file and creates a new client. Once the client is defined, it tries to create a new connection to the database. The 

 database is then exported if the connection is successful. This gives us a uniform interface that can be reused in all modules.

The core of this tutorial is to expose REST API routes to perform Create, Read, Update, and Delete (CRUD) operations for our restful web service.

In this sample application, all the routes for our server are located in the file 

. We then tell our server to use this module for all the incoming requests to routes that start with 

The code is already there, so you don't need to add that. We will now focus on the logic for all of the API requests.

The Read route will be returning 50 of the articles when there is a get request on the 

; find the GET route and replace the code with the following.

Here, we start by defining our collection object, then do a 

 operation. We limit the results and convert the response data to an array. We can then send data to the client using 

. We can also specify the status code with the 

 method. Code 200 stands for "OK, " meaning that the operation was successful.

​You can also create a more complex route using aggregation pipelines to return a result. For example, we can add a route that will return the three most recent articles in the collection.

As you can see here, the code is similar. This endpoint will catch all the get requests to

. We then use an aggregation pipeline to sort the collection in descending order of date and limit the results to three. This leverages the database to do the heavy lifting with our data.

You can also use parametrized routes to return filtered results or, in this case, a single object. Notice in the following code snippet that the route takes an 

 parameter. You can then access the value of that parameter with 

In this get request, the id is converted into an 

 using the method provided by the MongoDB native driver. It is a query filter to retrieve a single document with this unique id.

If no results are found, we can send a different response — a 404 error message, in this case.

The Create route will add a new post to our collection. To catch a post request, you will use the 

 method from Express to define this route. Based on the REST conventions, adding new items should be done with a POST method.

In this sample, we take the request body, append the current date and time, and save it in the collection direction with the 

The Update route adds a new comment to our blog post. Best practices in REST API design state that we should use a PATCH request for updates. Sometimes, a PUT request might also be used.

You might wonder why this is considered an update and not a create. This is because we are leveraging the MongoDB document model. Since we are not restricted to a flat structure like a relational database, we store all the comments as an array inside the post object.

To add a comment, we will update this array with a 

 operator with the request body as the new comment.

 method with the unique id specified as an ObjectId, and the operator as the second argument.

And last but not least, we need to handle the delete request. The users will have the ability to delete an article from our blog.

Here, we are using a parametrized route to get the id of the object to delete. The post is then deleted with the 

Your server is now ready to be used. You can already test it with tools such as 

 or curl. For example, you could run the following command to get the latest articles.

Now, any third-party applications can connect to this server, but let's see how we can get our React application to connect.

Plenty of tutorials provide a lot more detail on how to query a public API and manage responses from a client request. Understanding the basics of React applications is out of the scope of this article, but you can see examples of how to access the API you just created in the 

 file, we retrieve the latest three entries from the blog. This is done through a request to the 

 route of the server. In this application, we are using the browser's native 

 and passes the URL to the API. We could use the response in several data formats, but we are explicitly converting it to JSON, as it's the easiest way to manipulate data in JavaScript. The 

 function updates the application's state and forces the user interface to re-render.

All requests to read from the API follow the same pattern. We use the following to fetch all the articles in the 

The only difference here is the route. The same goes for fetching a single document in 

 object to create a new entry, but you will need to specify the HTTP method, an additional http header, and the request body. The code to create, update, or delete entries can be found in 

Doing an update follows the same patterns but with a different method.

And the same is true for a delete request.

If you want to test the application, open a new terminal and run the following.

Once all components are up and running, we can open the 

 URL, and you should see the sample blog. From there, you can create new blog posts, read an existing entry, add a comment, or delete that entry.

You now have a fully functional application that uses the REST principles. It has a back end that answers the necessary requests, and the client can request data from those endpoints.

Using Express as a back-end framework is a popular MongoDB stack design. Express is lightweight and approachable for JSON and REST API operations. 

 is a scalable and flexible document database as a service and makes a perfect companion to Express in many stacks like MERN, MEAN, and MEVN.

Rich text2 express-mongodb-rest-api-tutorial

The MongoDB Driver is the native driver for Node JS applications. Therefore, the Express JS server can use it to access MongoDB.

In this article, we covered the essential parts of setting up an Express server with connection to MongoDB Atlas as well as exposing REST API endpoints to the client applications.

FAQs

none

express-mongodb-rest-api-tutorial - API - Accordions

Want to learn more about MongoDB and Express?

Rich text3 express-mongodb-rest-api-tutorial

Learn MongoDB with expert tutorials and tips on our new Developer YouTube channel. Subscribe >

Follow along with this tutorial to add MongoDB Atlas as the data store for your applications, by creating NodeJS and Express Web REST API.

Building a REST API with Express, Node, and MongoDB

How do I use MongoDB with Express JS?

How do I create a REST API using node Express and Mongo?